<template>
  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <v-spacer/><!-- v-spacer标签表示一个大空格 -->
      <v-flex xs3>
        <!-- 搜索框  -->
        <!-- append-icon="search"表示放大镜图标 hide-details作用是让距离变的紧凑 -->
        <v-text-field label="输入关键字搜索" v-model="key" append-icon="search" hide-details/>
      </v-flex>
    </v-card-title>
    <v-divider/><!-- 此标签是分割线 -->
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
      :rows-per-page-text="rowsPerPageText"
      :rows-per-page-items="rowsPerPageItems"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.id }}</td>
        <td class="text-xs-left">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
          <span v-else>无</span>
        </td>
        <td class="text-xs-left">{{ props.item.letter }}</td>
        <td class="text-xs-left layout px-0">
          <!--编辑按钮-->
          <v-btn icon class="mx-0" @click="editBrand(props.item)">
            <v-icon color="teal">edit</v-icon>
          </v-btn>
          <!--删除按钮-->
          <v-btn icon class="mx-0">
            <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!-- 弹出的修改、新增对话框-->
    <!-- persistent点击对话框外部不能使其关闭 -->
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <v-card>
        <!-- toolbar 对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '添加'}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5" style="height:400px">
          <my-brand-form @close="closeWindow" :old-brand="oldBrand" :isEdit="isEdit"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  //导入自定义的表单组件
  import MyBrandForm from "./MyBrandForm"

  export default {
    name: "MyBrand",
    data() { //TODO data属性
      return {
        oldBrand: {},
        key: "",// 用户输入的搜索内容
        totalBrands: 0,//默认总条目数
        brands: [],  // 当前页品牌数据
        loading: true,  //loading表示进度条动画
        show: false,//相当于新增、修改对话框的按钮,false为不弹出,true为弹出对话框
        isEdit: false,//true为修改,false是新增,动态显示新增或修改
        rowsPerPageText: "每页显示数量",
        rowsPerPageItems: [5, 10, 25, {"text": "所有", "value": -1}],
        pagination: {}, //分页信息
        headers: [
          {text: 'id', align: 'left', value: 'id'},
          {text: '名称', align: 'left', value: 'name', sortable: false},
          {text: 'logo', align: 'left', value: 'image', sortable: false},
          {text: '首字母', align: 'left', value: 'letter'},
          {text: '操作', value: 'letter', sortable: false}],
      }
    },
    watch: {//TODO watch监控
      pagination: {
        deep: true,
        //handler表示当前监听的属性产生变化的时候你要做什么操作
        handler() {
          //当pagination产生变化的时候重新调用方法查询后台数据即可
          this.getDataFromService();
        }
      },
      key: {
        handler() {
          this.getDataFromService();
        }
      }
    },
    created() {//TODO created生命周期
      this.getDataFromService();
    },
    methods: {//TODO methods方法
      getDataFromService() {
        this.$http.get("/item/brand/page", {
          params: {
            key: this.key, // 搜索条件
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
            sortBy: this.pagination.sortBy,// 排序字段,当不排序时为null
            desc: this.pagination.descending// 是降序,否升序
          }
        }).then(resp => {
          //后台的查询结果items数据赋值给brands
          this.brands = resp.data.items;
          //后台查询的总页码数赋值给
          this.totalBrands = resp.data.total;
          //查询完毕进度条动画关闭
          this.loading = false;
        }).catch(resp => {
          console.log("(分类管理)查询失败");
          console.log(resp);
        })

      },
      addBrand() {//TODO 新增窗口点击事件
        this.show = true;
        this.isEdit = false;
        this.oldBrand = null;
      },
      closeWindow() {//TODO 关闭窗口点击事件
        //关闭窗口
        this.show = false;
        //窗口关闭时刷新页面数据
        this.getDataFromService();
      },
      editBrand(oldBrand) {//TODO 编辑窗口点击事件
        //根据品牌的id查询分类的对象
        this.$http.get("item/category/bid/" + oldBrand.id)
          .then(resp => {
            oldBrand.categories = resp.data;
            this.oldBrand = oldBrand;
            //打开窗口
            this.show = true;
            this.isEdit = true;
          }).catch(resp => {
          console.log("品牌对应的对象没有查询到数据")
        });
      }
    },
    components: {//TODO 注册子组件
      // 注册子组件(创建、修改的弹窗)
      MyBrandForm
    }
  }
</script>

<style scoped>

</style>
